<template>
  <el-dialog
    :model-value="appointmentVisible"
    :title="appointmentTitle"
    width="70%"
    @close="handleClose"
  >
    <el-card>
      <el-row class="header">
        <el-form :model="queryForm" label-width="100px" :rules="rules" ref="formRef">
          <el-table ref="multipleTable" :data="tableDate" row-key border style="width: 100%" @select="select"
                      select-on-indeterminate="true">
              <el-table-column type="selection" width="55"/>
            <el-table-column prop="name" label="车主姓名"></el-table-column>
            <el-table-column prop="phone" label="车主电话"></el-table-column>
            <el-table-column prop="brand.name" label="汽车品牌"></el-table-column>
            <el-table-column prop="color.name" label="颜色"></el-table-column>
            <el-table-column prop="model.name" label="车型"></el-table-column>
            <el-table-column prop="plateNum" label="车牌号"></el-table-column>
            <el-table-column prop="arriveTime" label="预估到店时间" :formatter="formatTime"></el-table-column>
            <el-table-column prop="type" label="服务类型" :formatter="formatType"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="formatTime"></el-table-column>
            <el-table-column prop="store.companyName" label="所属门店"></el-table-column>
          </el-table>
        </el-form>
      </el-row>
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="prev, pager, next, jumper, sizes, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="true"
      />
    </el-card>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, onMounted, defineProps, watch } from 'vue'
import { list } from '../../../api/appointment'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const queryForm = ref({
  id: '',
  name: '',
  phone: '',
  brandId: '',
  colorId: '',
  modelId: '',
  plateId: '',
  userId: '',
  plateNum: '',
  arriveTime: '',
  type: '',
  createTime: '',
  pageNum: 1,
  pageSize: 10
})

const tableDate = ref([])
const total = ref(0)
const appointmentVisible = ref(false)
const appointmentTitle = ref('')

async function query() {
  const resp = await list(queryForm.value)
  tableDate.value = resp.data.data.list
  total.value = resp.data.data.total
}

// 多选框拿数据
function select(selection, row) {
  // console.log(selection)
  queryForm.value = JSON.parse(JSON.stringify(row))
}

const emits = defineEmits(['update:modelValue', 'query'])
const formRef = ref(null)

// 关闭
function handleClose() {
  emits('update:modelValue', false)
}

const pas = ref({})
const store = useStore()

// 确认
function handleConfirm() {
      pas.value = queryForm.value
      // 数据共享 存储在本地
      store.commit('app/Appointment', pas.value)
      ElMessage({
        message: '选择预约记录成功',
        type: 'success'
      })
      // 上层主键获取信息
      emits('query')
      handleClose()
}

const props = defineProps({
  // 标题
  appointmentTitle: {
    type: String,
    default: '',
    required: true
  },
  // 编辑行数据
  appointmentRowValue: {
    type: Object,
    default: () => {}
  }
})
// 监听props.dialogRowValue值改变
watch(
  () => props.appointmentRowValue,
  () => {
    queryForm.value = props.appointmentRowValue
  },
  { deep: true, immediate: true }
)

// 页面加载后自动执行
onMounted(() => {
  query()
})

// 分页
function handleCurrentChange(pageNum) {
  queryForm.value.pageNum = pageNum
  query()
}

function handleSizeChange(pageSize) {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  query()
}

// 服务类型转换
function formatType(row, column) {
  const type = row[column.property]
  if (type === '1') {
    return '维修'
  } else {
    return '保养'
  }
}
function formatTime(row, column) {
  const date = new Date(row[column.property])
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  let day = date.getDate()
  if (day < 10) {
    day = '0' + day
  }
  return year + '-' + month + '-' + day
}

</script>

<style class="scss" scoped>
::v-deep .el-input__prefix-inner {
  align-items: center;
}
</style>
